<script lang="ts" setup>
defineProps<{ onSignUp?: () => void }>();
const bp = useAppBreakpoints();
</script>

<template>
  <div class="mb-20">
    <div class="container">
      <div class="commission-plan-inner">
        <div class="commission-plan-info">
          <h2 class="mb-0 text-8 font-700 lt-mobilel:text-6">
            Сommission plan
          </h2>
          <p>The G9.game Affiliate program allows you to earn a percentage of the net revenue on the referred players*. Our revenue share plans start from 25% and grow up to 50% for high-performing traffic. </p>
          <p> The percentage of Revenue Share varies depending on the quality of the traffic. Сontact our manager for clarification of all details. </p>
          <p>Let us enjoy the success together!</p>
          <p>*Reward for Casino NGR and Sports Betting NGR is calculated separately.</p>
        </div>
        <div class="commission-plan-detail">
          <img v-if="bp.tablet" src="../imgs/plan-pc.png" class="h-full w-full">
          <img v-if="bp.ltTablet" src="../imgs/plan-mb.png" class="h-full w-full">
        </div>
        <div class="w-full">
          <div class="banner-wrapper">
            <img v-if="bp.mobilel" src="../imgs/banner-wrapper-pc.png" class="h-full w-full">
            <img v-if="bp.ltMobilel" src="../imgs/banner-wrapper-mb.png" class="h-full w-full">
            <div v-if="bp.mobilel" class="absolute right-7.5">
              <AButton class="ant-cover__Button-3d-primary !h-12.5 !w-full" type="primary" @click="onSignUp">
                Become a partner
              </AButton>
            </div>
          </div>
        </div>
      </div>
      <div v-if="bp.ltMobilel" class="mt-4">
        <AButton class="ant-cover__Button-3d-primary absolute !h-12.5 !w-full" type="primary" @click="onSignUp">
          Become a partner
        </AButton>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.commission-plan-inner {
  --uno: 'flex items-end flex-wrap gap-x-5 overflow-hidden rounded-4';
  background: linear-gradient(90deg, #131416 0%, #3e404c 100%);
  --uno: 'lt-mobilel:(block)';
}
.commission-plan-info {
  width: calc(40% - 14px);
  --uno: 'flex gap-4 items-start flex-col pt-7.5 pl-10 lt-mobilel:(pt-7.5 px-4 w-full)';
  p {
    --uno: 'text-3.5 text-slate-100 font-400 leading-5 ';
    &:last-child {
      --uno: 'mb-5';
    }
  }
}
.commission-plan-detail {
  --uno: 'h-full flex-1 pt-2 pr-10 lt-mobilel:(px-4 w-full)';
}
.banner-wrapper {
  --uno: 'w-full items-center flex h-27 justify-between relative lt-mobilel:(h-16.5)';
}
</style>
